<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import CesiumNavigation from 'cesium-navigation-es6';

import { initViewer, CesiumNavigationOptions } from './cesium/initViewer';
import { modifyMap } from './cesium/modifyMap';
import { modifyBuild } from './cesium/modifyBuild';
import LightCone from './cesium/Lightcone';
import RectFlyLight from './cesium/RectFlyLight';
import RoadLightLine from './cesium/RoadLightLine';
import RadartLight from './cesium/RadartLight';
import LightSpread from './cesium/LightSpread';
import LightWall from './cesium/LightWall';

import MousePosition from './cesium/MousePosition';
import './Widgets/widgets.css';

onMounted(async () => {
  const viewer = initViewer();

  // 根据鼠标位置生成经纬度值
  const mousePosition = new MousePosition(viewer);

  //如需自定义罗盘控件，请看下面的自定义罗盘控件
  new CesiumNavigation(viewer, CesiumNavigationOptions);

  // 修改地图底色
  modifyMap(viewer);
  // 修改建筑物 着色器
  modifyBuild(viewer);

  new LightCone(viewer);
  new RectFlyLight(viewer);
  new RoadLightLine(viewer);
  new RadartLight(viewer);
  new LightSpread(viewer);
  new LightWall(viewer);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 100vh;
  width: 100vw;
}
</style>
